import React, { lazy } from 'react'
import Loading from '../components/Loading'
import { Navigate } from 'react-router-dom'
import NotFound from '../pages/404'
import Layout from '../layout'
const About = lazy(()=> import('../pages/About'))
const Home = lazy(()=> import('../pages/Home'))
const withLoadingComponent = (comp)=>{
	return (
		<React.Suspense fallback={<Loading/>}>
			{comp}
		</React.Suspense>
	)
}

const routes = [
	{
		path: '/',
		element: <Navigate to='/home' />
	},
	{
		path: '/',
		element: <Layout />,
		children: [
			{
				path: '/home',
				element: withLoadingComponent(<Home />)
			},
			{
				path: '/about',
				element: withLoadingComponent(<About />)
			}
		]
	},
	{
		path: '*',
		element: <NotFound />
	}
]
export default routes